<style include="cr-shared-style diagnostics-shared diagnostics-fonts">
  .card-width {
    width: 100%;
  }

  .diagonstics-cards-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-inline: var(--container-padding);
    width: var(--content-container-width);
  }

  #diagnosticsContainer {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: inherit;
    position: relative;
  }

  #download-icon {
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
    color: var(--google-blue-600);
    right: 4px;
  }

  #header {
    @apply --diagnostics-header-font;
    align-self: flex-start;
    margin-bottom: 10px;
    margin-left: 22px;
  }

  .overview-container {
    margin-bottom: 10px;
  }
  .session-log-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  #toast {
    bottom: 0;
    left: 0;
  }
</style>
<div id="diagnosticsContainer" hidden="[[!systemInfoReceived_]]">
  <div id="header">[[i18n('diagnosticsTitle')]]</div>
  <div class="overview-container">
    <overview-card id="overviewCard"></overview-card>
  </div>
  <div class="diagonstics-cards-container">
    <template is="dom-if" if="[[showBatteryStatusCard_]]" restamp>
      <div class="card-width">
        <battery-status-card id="batteryStatusCard"
          is-test-running="{{isTestRunning}}">
        </battery-status-card>
      </div>
    </template>
    <div class="card-width">
      <cpu-card id="cpuCard"
        is-test-running="{{isTestRunning}}">
      </cpu-card>
    </div>
    <div class="card-width">
      <memory-card id="memoryCard"
        is-test-running="{{isTestRunning}}">
      </memory-card>
    </div>
    <div class="card-width" hidden="[[!isNetworkingEnabled_()]]">
      <connectivity-card id="connectivityCard"
        is-test-running="{{isTestRunning}}">
      </connectivity-card>
    </div>
  </div>
  <div class="session-log-container">
    <cr-button on-click="onSessionLogClick_" class="session-log-button"
        hidden="[[!isLoggedIn_]]">
      <iron-icon icon="diagnostics:download" id="download-icon"></iron-icon>
      <span>[[i18n('sessionLog')]]</span>
    </cr-button>
  </div>
  <cr-toast id="toast" duration="2500">
    <span>[[toastText_]]</span>
  </cr-toast>
</div>
